<template>
  <div>
    <van-form @submit="bookTypeOnSubmit">
      <van-cell-group inset>
        <van-field
          v-model="typeModel"
          input-align="right"
          is-link
          readonly
          name="picker"
          label="书目类别"
          placeholder="点击选择书目类别"
          @click="typeOnChange"
          disabled
        />
        <van-popup v-model:show="typeShowPicker" position="bottom">
          <van-picker
            :columns="state.typeColumns"
            @confirm="typeOnConfirm"
            @cancel="typeOnCancel"
          />
        </van-popup>
        <van-field
          v-model="parentIdModel"
          input-align="right"
          is-link
          readonly
          name="picker"
          label="书目类别"
          placeholder="点击选择书目类别"
          @click="parentOnChange"
        />
        <van-popup v-model:show="parentIdShowPicker" position="bottom">
          <van-picker
            :columns="state.parentColumns"
            @confirm="parentOnConfirm"
            @cancel="parentOnCancel"
          />
        </van-popup>
        <van-field
          v-model="typeForm.name"
          input-align="right"
          label="类别名称"
          placeholder="请输入类别名称"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { useAppStore, useUserStore } from "../../../stores";
import { computed, reactive, ref } from "vue";

import { AddBookType, getBookListSelect } from "@/service/book";
import { useRoute, useRouter } from "vue-router";
import { showToast, showSuccessToast } from "vant";

const appStore = useAppStore();
const userStore = useUserStore();

const router = useRouter();
const route = useRoute();

const typeModel = computed(() => {
  const typeMap = new Map(state.typeColumns.map((item) => [item.value, item]));
  return typeForm.type && typeMap.get(typeForm.type).text;
});

const parentIdModel = computed(() => {
  const parentMap = new Map(
    state.parentColumns.map((item) => [item.value, item])
  );
  return typeForm.parentId && parentMap.get(typeForm.parentId).text;
});

const state = reactive({
  typeColumns: [
    { text: "英语", value: 1 },
    { text: "数学", value: 2 },
    { text: "语文", value: 3 },
    { text: "古诗", value: 4 },
  ],
  parentColumns: [],
});

const typeShowPicker = ref(false);
const typeOnChange = (e) => {
  typeShowPicker.value = true;
};

const typeOnConfirm = ({ selectedOptions }) => {
  typeForm.type = selectedOptions[0]?.value;
  typeShowPicker.value = false;
};

const typeOnCancel = (e) => {
  typeShowPicker.value = false;
};

const typeForm = reactive({
  type: null,
  parentId: null,
  name: "",
  cUserId: null,
});

const parentIdShowPicker = ref(false);

const parentOnChange = () => {
  parentIdShowPicker.value = true;
};

const parentOnConfirm = ({ selectedOptions }) => {
  typeForm.parentId = selectedOptions[0]?.value;
  parentIdShowPicker.value = false;
};
const parentOnCancel = (e) => {
  parentIdShowPicker.value = false;
};

const bookTypeOnSubmit = async () => {
  const { status } = await AddBookType({
    ...typeForm,
    ...{ cUserId: userStore.userData.cUserId },
  });
  if (status == 0) {
    showSuccessToast("新增成功");
    router.go(-1);
  }
};

const getparentList = async () => {
  const { data } = await getBookListSelect({ type: route.query.model });
  state.parentColumns = data.map((item) => ({
    text: item.name,
    value: item.id,
  }));
};

typeForm.type = Number(route.query.model);
getparentList();
</script>

<style scoped></style>
